<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <li class="li1">element.addEventListener('action',function(){smone action})</li>
    <li class="li2">传统移除事件，element.onclick = null</li>
    <li class="li3">常用的element.removeEventListener('action',functionName)</li>
    <script>
        var li1 = document.querySelector('.li1');
        li1.addEventListener('click', function () {
            alert('这是第一个事件');
        })
        li1.addEventListener('click', function () {
            alert('这是第二个事件');
        })
        var li3 = document.querySelector('.li3');

        function myfn() {
            alert('这是被移除事件');
        }
        li3.addEventListener('click', myfn);
        // li3.removeEventListener('click', myfn);
    </script>
</body>

</html>